<template>
  <div>
    <div class="flexContent">
      <div class="searchBox">
        <el-form ref="formRef" :model="sForm" class="demo-form-inline" label-position="left" label-width="auto">
          <div class="serFlexBox">
            <div class="inputBox">
              <el-row :gutter="12" style="display: flex;flex-wrap: wrap;">
                <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
                  <el-form-item label="门店名称">
                    <el-select v-model="sForm.storeId" @change="searchFn" popper-class="eloption" style="width: 95%;"
                      filterable placeholder="请选择">
                      <el-option v-for="brand in brandList" :key="brand.storeId" :value="brand.storeId"
                        :label="brand.storeName" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="12" :sm="12" :md="12" :lg="10" :xl="6">
                  <el-form-item label="日期">
                    <el-date-picker :picker-options="pickerOptions" :clearable="false" v-model="date" style="width: 95%;"
                      type="daterange" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                      value-format="yyyy-MM-dd" />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div class="btnBox">
              <el-button @click.stop="searchFn" class="searchBtn" icon="el-icon-search">搜索</el-button>
              <el-button @click.stop="resetFn" class="resetBtn" icon="el-icon-refresh-right">重置</el-button>
            </div>
          </div>
        </el-form>
      </div>
      <div class="content">
        <div class="one">
          <div class="echarts1" id="pieEcahrt2"></div>
          <div class="labelBox">
            <div>净营业额：{{ nData.totalTurnover }}元</div>
            <div>优惠：{{ nData.discountMoney }}元</div>
            <div v-for="(item, index) in nData.list" :key="index">{{ item.name }}:{{ item.value }}元</div>
          </div>
          <div class="echarts1" id="pieEcahrt"></div>
          <div class="labelBox">
            <div>净营业额：{{ yData.totalTurnover }}元</div>
            <div>优惠：{{ yData.discountMoney }}元</div>
            <div v-for="(item, index) in yData.list" :key="index">{{ item.name }}:{{ item.value }}元</div>
          </div>
        </div>
        <div class="three">
          <div class="echarts1" id="zhexian2"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getShopTurnover, getShopTurnoverYesterday, getShopListSelect, getShopTurnoverHistory } from '@/api/store'
import * as echarts from "echarts/core";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from "echarts/components";
import { PieChart, BarChart, LineChart } from "echarts/charts";
import { LabelLayout, UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import dayjs from 'dayjs';
echarts.use([
  GridComponent,
  BarChart,
  LineChart,
  UniversalTransition,
  TitleComponent,
  TooltipComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout,
  LegendComponent,
]);
export default {
  name: "Drawer",
  props: {
    drawer: {
      default: false,
      type: Boolean,
    },
  },
  data() {
    return {
      direction: "rtl",
      sForm: {
        storeId: '',
      },
      yData: {
        list: [],
        discountMoney: null,
        totalTurnover: null,
      },
      nData: {
        list: [],
        discountMoney: null,
        totalTurnover: null,
      },
      date: [],
      brandList: [],
      timeOptionRange: null,
      pickerOptions: {
        onPick: time => {
          // 选择开始时间未选择结束时间
          if (time.minDate && !time.maxDate) {
            this.timeOptionRange = time.minDate;
          }
          if (time.maxDate) {
            this.timeOptionRange = null;
          }
        },
        disabledDate: time => {
          let timeOptionRange = this.timeOptionRange;
          let secondNum = 1000 * 60 * 60 * 24 * 29;
          if (!timeOptionRange) {
            return time.getTime() > Date.now() - 8.64e6
          }
          if ((timeOptionRange.getTime() + secondNum) > (Date.now() - 8.64e6)) {
            return time.getTime() > Date.now() - 8.64e6 || time.getTime() < timeOptionRange.getTime() - secondNum;
          }
          return time.getTime() > timeOptionRange.getTime() + secondNum || time.getTime() < timeOptionRange.getTime() - secondNum;
        }
      },
    };
  },
  created() {
    let t1 = dayjs().format('YYYY-MM-DD')
    let t2 = dayjs().subtract(13, 'day').format('YYYY-MM-DD')
    // console.log('time', new Date().getTime());
    this.date = [t2, t1]

    console.log('11', t1, t2);
    this.getShopEasy()
  },
  mounted() {
    // this.initPie();
    // this.initPie2();
    // this.initSecond2();
  },
  methods: {
    async getShopEasy() {
      const res = await getShopListSelect();
      if (res.code === 200) {
        this.brandList = res.data;
        this.sForm.storeId = this.brandList[0]?.storeId;
        console.log('this.sForm.storeId', this.sForm.storeId);
        if (this.brandList.length > 0) {
          this.getShopTurnover();
          this.getShopTurnoverYesterday();
          this.getShopTurnoverHistory();
        } else {
          this.$message.warning('暂无管理门店')
        }
      }
    },
    async getShopTurnover() {
      let res = await getShopTurnover({ storeId: this.sForm.storeId });
      // this.storeId = id;
      if (res.code === 200) {
        console.log('今日', res.data);
        this.nData.list = res.data.list
        this.nData.discountMoney = res.data.discountMoney
        this.nData.totalTurnover = res.data.totalTurnover

        this.initPie2(res.data.list)

        // return

      } else {
        // this.$message.error(res.message)
      }
    },
    async getShopTurnoverYesterday() {
      const res = await getShopTurnoverYesterday({ storeId: this.sForm.storeId });
      // this.storeId = id;
      if (res.code === 200) {
        console.log('昨日', res.data);
        this.initPie(res.data.list)
        this.yData.list = res.data.list
        this.yData.discountMoney = res.data.discountMoney
        this.yData.totalTurnover = res.data.totalTurnover
        // return

      } else {
        // this.$message.error(res.message)
      }
    },
    async getShopTurnoverHistory() {
      const res = await getShopTurnoverHistory({ storeId: this.sForm.storeId, openTime: this.date[0], endTime: this.date[1] });
      // this.storeId = id;
      if (res.code === 200) {
        console.log('历史', res.data);
        let xdata = res.data.map(item => item.name)
        let ydata = res.data.map(item => item.value)
        this.initSecond2(xdata, ydata)
        // return

      } else {
        // this.$message.error(res.message)
      }
    },
    initPie(data) {
      let option = {
        title: {
          text: '昨日营业额概况',
          left: 'center'
        },
        color: ['#009dff', '#22e4ff', '#3bffd0', '#04e38a'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          bottom: 'bottom'
        },
        series: [
          {
            name: '昨日营业额',
            type: 'pie',
            radius: '50%',
            label: {
              formatter: '{c}元'
            },
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      var chartDom = document.getElementById("pieEcahrt");
      var myChart = echarts.init(chartDom);
      option && myChart.setOption(option);
    },
    initPie2(data) {
      let option = {
        title: {
          text: '今日营业额概况',
          left: 'center'
        },
        color: ['#009dff', '#22e4ff', '#3bffd0', '#04e38a'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          bottom: 'bottom'
        },
        series: [
          {
            name: '今日营业额',
            type: 'pie',
            radius: '50%',
            label: {
              formatter: '{c}元'
            },
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      var chartDom = document.getElementById("pieEcahrt2");
      var myChart = echarts.init(chartDom);
      option && myChart.setOption(option);
    },
    initSecond2(xdata, ydata) {
      let option = {
        title: {
          text: '历史营业额概况',
          left: 'left'
        },
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          type: 'category',
          data: xdata
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} 元'
          }
        },
        series: [
          {
            data: ydata,
            type: 'line',
            label: {
              show: true,
              formatter: '{c}元'
            },
          }
        ]
      };
      var chartDom1 = document.getElementById("zhexian2");
      var myChart1 = echarts.init(chartDom1);
      option && myChart1.setOption(option);
    },
    searchFn() {
      this.getShopTurnover()
      this.getShopTurnoverYesterday();
      this.getShopTurnoverHistory();
    },
    resetFn() {
      let t1 = dayjs().format('YYYY-MM-DD')
      let t2 = dayjs().subtract(13, 'day').format('YYYY-MM-DD')
      this.date = [t2, t1]
      this.getShopEasy()
    }
  },
};
</script>
<style scoped lang="scss">
.content {
  flex: 1;
  padding: 0 20px;
  display: flex;
  flex-direction: column;

  .searchBox {
    height: 200px;
  }

  .one {
    height: 1.5625rem;
    display: flex;
    // border-bottom: 2px solid #ccc;
    margin-bottom: 50px;

    #pieEcahrt {
      padding-top: 20px;
      width: 30%;
      height: 1.5625rem;
    }

    #pieEcahrt2 {
      padding-top: 20px;
      width: 30%;
      height: 1.5625rem;
    }

    .labelBox {
      width: 15%;
      // padding-top: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
  }

  .three {
    height: 1.7188rem;
    // border-bottom: 2px solid #ccc;

    .tit {
      vertical-align: middle;
    }

    #zhexian2 {
      width: 100%;
      height: 1.7188rem;
    }
  }

}
</style>
